
* {
	font-family:Arial;
	margin:0;
	padding:0;
	font-size:14px;
	line-height:1.5em;
	list-style:none;
	letter-spacing:0.15em;
	text-decoration:none;
	color:#000000;
	box-sizing:border-box;
}
/*列*/
.col-1 {width:8.33%;}
.col-2 {width:16.66%;}
.col-3 {width:25%;}
.col-4 {width:33.33%;}
.col-5 {width:41.66%;}
.col-6 {width:50%;}
.col-7 {width:58.33%;}
.col-8 {width:66.66%;}
.col-9 {width:75%;}
.col-10 {width:83.33%;}
.col-11 {width:91.66%;}
.col-12 {width:100%;}

/*浮动 让其变为列*/
.row [class ^= "col"] {
	float:left;
	padding:15px;
}
.row:after {
	content:"";
	display:block;
	clear:both;
	width:0;
	height:0;
	visibility:hidden;
}

.header {
	background:#9933CC;
	margin:1%;
	padding:5%;
}
	.header h1 {
		color:#FFFFFF;
		font-size:40px;
		letter-spacing:0.5em;
	}

.nav li {
	padding:3%;
	margin-bottom:5%;
	background:#33b5e5;
	text-align:center;
}
.nav li:hover {
	background:#0099CC;
}
	.nav li a {
		color:#FFFFFF;
	}

.content h2 {
	font-size:30px;
	margin-bottom:1%;
}

/*当浏览器宽度小于500px的时候，导航成一行，内容自动往下*/
@media screen and (max-width:600px){
	/*for mobile phones*/
	[class ^= "col-"] {
		width:100%;
	}
	.header {
		text-align:center;
	}
	.nav {
		position:relative;
	}
		.nav li {
			margin:0;
		}
		.nav li:nth-child(2), .nav li:nth-child(3) {
			display:none;
		}
		.nav:hover li:nth-child(2), .nav:hover li:nth-child(3){
			display:block;
		}
	.content {
		text-align:center;
	}
}


